var React = require('react');
var token = $.cookie('token');
var mytoken = JSON.parse(token);
const ReturnWarehousing = React.createClass({
    getInitialState: function () {
        return {goods: [], goodsCopy: []}

    },
    componentWillMount: function () {
        var _this = this;
        $.ajax({
            type: "GET",
            url: "/api/Goods/GetAllGoodsInfo",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    _this.setState({goods: data, goodsCopy: data});
                } else {
                    alert("商品信息获取失败");
                }

            },
            error: function (msg) {
                alert(msg);
            }
        });

    },
    componentDidMount: function () {
        var _this = this;
        $('#search-submit').click(function () {
            _this.setState({goods: _this.state.goodsCopy});
            var searchResult = [];
            function isContains(str, substr) {
                return new RegExp(substr).test(str);
            }
            _this
                .state
                .goods
                .map(goo => {
                    if (isContains(goo.GoodsName, $('#goods-name').val())) {
                        searchResult.push(goo);
                    }
                });
            if (searchResult.length == 0) {
                $('#goods-name').val("无此商品");
            } else {
                _this.setState({goods: searchResult});
                $('#search-Modal').modal('hide')
            }
        });
        $('#return-submit').click(function () {
            var goodsId = $('#return-goods-id').val();
            var stock = $('#goods-stock').val();
            $.ajax({
                type: "Post",
                url: "/api/Goods/ReturnGoods",
                headers: {
                    Authorization: "Bearer " + mytoken.access_token
                },
                data: JSON.stringify({goodsId: goodsId, stock: stock}),
                dataType: "json",
                contentType: 'application/json',
                success: function (data) {
                    if (data != null) {
                        _this.setState({goods: data});
                        $('#return-Modal').modal('hide');
                    }

                },
                error: function (msg) {
                    alert("出错了");
                }
            });
        });
    },

    getState: function (state) {
        if (state == 0) {
            return (
                <h5>
                    <span className="label label-info">上架热卖中</span>
                </h5>
            )
        } else {
            return (
                <h5>
                    <span className="label label-default">商品下架中</span>
                </h5>
            )
        }
    },
    returnGoods: function (goodsId) {
        $('#return-goods-id').val(goodsId);
    },
    getGoodsInfo: function () {
        return this
            .state
            .goods
            .map(goo => {
                return (
                    <tr key={goo.GoodsId}>
                        <td>
                            <li
                                className="dropdown"
                                style={{
                                listStyleType: 'NONE'
                            }}>
                                <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                                    操作
                                    <b className="caret"></b>
                                </a>
                                <ul className="dropdown-menu">
                                    <li>
                                        <a
                                            data-toggle="modal"
                                            data-target="#return-Modal"
                                            onClick={this
                                            .returnGoods
                                            .bind(this, goo.GoodsId)}>退货入库</a>
                                    </li>
                                </ul>
                            </li>
                        </td>
                        <td>{goo.GoodsId}</td>
                        <td>{goo.GoodsName}</td>
                        <td>{goo.Price}</td>
                        <td>{goo.Stock}</td>
                        <td>{goo.Category}</td>
                        <td className="col-md-3">{goo.Describe}</td>
                        <td className="col-md-3">{goo.Details}</td>
                        <td>{this.getState(goo.State)}</td>
                        <td>{goo.AddTime}</td>
                    </tr>
                )
            })
    },
    render() {
        return (
            <div>
                <section className="content-header">
                    <h1>
                        库存中心
                        <small>退货入库</small>
                    </h1>
                    <ol className="breadcrumb">
                        <li>
                            <a href="#">
                                <i className="fa fa-dashboard"></i>
                                Stage</a>
                        </li>
                        <li>
                            <a href="#">退货入库</a>
                        </li>
                        <li className="active">概览</li>
                    </ol>
                </section>
                <br/>
                <div className="box">
                    <div className="box-header with-border">
                        <h3 className="box-title">退货入库</h3>
                        <div className="box-tools pull-right">
                            <span className="label label-primary">商品概览</span>
                        </div>
                    </div>
                    <div className="box-body">
                        <table className="table table-striped">
                            <thead>
                                <tr>
                                    <th>操作</th>
                                    <th>商品编号</th>
                                    <th>商品名</th>
                                    <th>商品价格</th>
                                    <th>库存</th>
                                    <th>商品分类</th>
                                    <th>商品描述</th>
                                    <th>商品细节</th>
                                    <th>上架情况</th>
                                    <th>添加时间</th>
                                </tr>
                            </thead>
                            <tbody id="goods-tbody">
                                {this.getGoodsInfo()}
                            </tbody>
                        </table>
                        <button
                            type="button"
                            className="btn btn-primary btn-lg"
                            data-toggle="modal"
                            data-target="#search-Modal"
                            style={{
                            marginTop: '1%',
                            marginLeft: '90%'
                        }}
                            id="search-goods">搜索商品</button>
                    </div>
                    <div className="box-footer">
                        <div
                            className="modal fade"
                            id="search-Modal"
                            tabIndex="-1"
                            role="dialog"
                            aria-labelledby="myModalLabel"
                            aria-hidden="true">
                            <div className="modal-dialog">
                                <div className="modal-content">
                                    <div className="modal-header">
                                        <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 className="modal-title" id="myModalLabel">搜索商品</h4>
                                    </div>
                                    <div className="modal-body">
                                        <div className="form-group">
                                            <label htmlFor="name">名称</label>
                                            <input
                                                type="text"
                                                className="form-control"
                                                id="goods-name"
                                                placeholder="请输入名称"/>
                                        </div>

                                    </div>
                                    <div className="modal-footer">
                                        <button type="button" className="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" className="btn btn-primary" id="search-submit">搜索</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            className="modal fade"
                            id="return-Modal"
                            tabIndex="-1"
                            role="dialog"
                            aria-labelledby="myModalLabel"
                            aria-hidden="true">
                            <div className="modal-dialog">
                                <div className="modal-content">
                                    <div className="modal-header">
                                        <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 className="modal-title">退货入库</h4>
                                    </div>
                                    <div className="modal-body">
                                        <div className="form-group">
                                            <input type="hidden" id="return-goods-id"/>
                                            <input
                                                type="text"
                                                className="form-control"
                                                id="goods-stock"
                                                placeholder="请输入退货数量"/>
                                        </div>

                                    </div>
                                    <div className="modal-footer">
                                        <button type="button" className="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" className="btn btn-primary" id="return-submit">确认退货</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = ReturnWarehousing;